<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="resources/js/jquery/jquery-1.10.2.js"></script>
	<script src="resources/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="resources/css/style.css"></link>
	<link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	
	<script type="text/javascript">
		var jq = jQuery.noConflict();
		var opened = [];
		var countProducts;
		var cPage;
		var idCurrentCategory;
		var isAdmin;
		var isUser;
		var onProduct = false;
		
	</script>
</head>
<body>
	<%@ page import="org.springframework.security.core.context.SecurityContextHolder, java.util.List" %>
	<%
		Boolean isAdmin = false;
		Boolean isUser = false;
		List roles = (List) SecurityContextHolder.getContext().getAuthentication().getAuthorities();
		for (Object r : roles) {
			if (r.toString().equals("ROLE_ADMIN")) isAdmin = true;
			if (r.toString().equals("ROLE_USER")) isUser = true;
		}
	%>
	<script type="text/javascript">
		isAdmin = <%= isAdmin %>;
		isUser = <%= isUser %>;
	</script>
	
	<div id="container">
	
		<jsp:include page="menubar.jsp"></jsp:include>
		
		<div id="left_sidebar">
			<center><h4>Categories</h4></center>
			<br>
			<div style="margin-left:20px">
			<font size="4">
				<c:forEach items="${parentCategory}" var="c">
					<a href="javascript:showSubcategory(${c.idCategory})">${c.name}</a><br>
					<div id="subcategory${c.idCategory}" style="margin-left:20px"></div>
				</c:forEach>
				<%if (isAdmin) {%>
					<br>
					<center>
						<a href="/catalog/editCategory?parent=0">[EDIT]</a>
					</center>
				<%}%>
			</font>
			</div>
		</div>
		
		<jsp:include page="right_sidebar.jsp"></jsp:include>
		
		<div id="content">
			<span id="addspan"></span>
			<div id="contentdiv"></div>
		</div>
	
	</div>
	
	<jsp:include page="footer.jsp"></jsp:include>
	
	
	
	<script type="text/javascript">
	function showSubcategory(idCategory) {
		
		if (isAdmin) {
			str = "<span id='addspan'>";
			str += "<a href='/catalog/addProduct?category=";
			str += idCategory;
			str += "'>ADD PRODUCT</a>";
			str += "</span>";
			jq("#addspan").replaceWith(str); 
		} 
		
		/*if (onProduct) {
			idCurrentCategory = idCategory;
			onProduct = false;
			getProducts(1);
			return;
		}*/
		idCurrentCategory = idCategory;
		
		if (!isOpened(idCategory)) {
			opened[opened.length] = idCategory;
		
			jq(function() {
				jq.post("/catalog/getSubcategory",
				{ id:  idCategory},
				function(data){
					var idSubcategory = "subcategory" + idCategory;
					//var str = '<span id="' + idSubcategory + '">';
					var str = '<div id="' + idSubcategory + '" style="margin-left:20px">';
					for (var i = 0; i < data.listCategory.length; ++i) {
						str += '<a href="javascript:showSubcategory(' + data.listCategory[i].idCategory + ')">' + data.listCategory[i].name + '</a><br>';
						str += '<div id="subcategory' + data.listCategory[i].idCategory + '" style="margin-left:20px"></div>';

					}

					//str += '</span>';
					str += '</div>';
					jq("#" + idSubcategory).replaceWith(str);
				
					idCurrentCategory = idCategory;
					countProducts = data.countProducts;
					getProducts(1);
			});
			});
		
		} else {
			deleteFromOpened(idCategory);
			var str = '<div id="subcategory' + idCategory + '" style="margin-left:20px"></div>';
			jq("#subcategory" + idCategory).replaceWith(str);
			getProducts(1);
		}
	
	
	}
	
	function isOpened(id) {
		for (var i = 0; i < opened.length; ++i)
			if (opened[i] == id) return true;
		return false;
	}
	
	function deleteFromOpened(id) {
		for (var i = 0; i < opened.length; ++i) 
			if (opened[i] == id) {
				opened.splice(i, 1);
				break;
			}
	}
	
	
	function getProducts(currentPage) {
		//alert("getProducts");
		cPage = currentPage;
		jq(function() {
			jq.post("/catalog/getProducts",
			{ 
				id:  idCurrentCategory,
				curPage: currentPage},
			function(data){
				if (data.length > 0) {
					var str = '<div id="contentdiv">';
					
					
					str += '<table width="90%" align="center" style="word-wrap: break-word">';
					
					for (var i = 0; i < data.length; ++i) {
						str += '<tr style="background: #dadada;">';
						str += '<td>';
						str += '<a href="javascript:showProduct(' + data[i].idProduct + ')"><h4>' + data[i].name; + '</h4></a>';
						str += '</td>';
						str += '<td></td>';
						if (isUser) {
							str += '<td align="right">';
							str += '<button onclick="javascript:addToCart(' + data[i].idProduct + ')" class="btn btn-lg btn-inverse" type="button">Add to Cart</button></td>';
						} else {
							str += '<td></td>';
						}
						str += '</tr>';
						str += '<tr>';
						str += '<td width="20%">';
						str += '<a href="javascript:showProduct(' + data[i].idProduct + ')">';
						str += '<img width=100% src="resources/img/' + data[i].idProduct + '.jpg"></a><br>';
						str += '</td>';
						str += '<td valign="top">&emsp;';
						var description = data[i].description.substr(0,100);
						str += description;
						str += '</td>';
						str += '<td align="right">';
						str += data[i].cost;
						if (isAdmin) {
							str += '</td>';
							str += '<td align="right">';
							str += '<a href="/catalog/editProduct?id=' + data[i].idProduct + '">EDIT</a>';
							str += '<br>'; 
							str += '<a href="javascript:deleteProduct(' + data[i].idProduct + ')">DELETE</a>';
						}
						str += '</td>';
						str += '</tr>';
					}
					
					str += '</table>';
					
					str += '<center>';
					
					str += '<br>';
					
					
					str += '<div class="pagination" style="overflow: auto;">';
					str += '<ul>';
					
						if (currentPage > 1) {
							str += '<li class="active">';
							str += '<a href="javascript:getProducts(' + (currentPage - 1) + ')" >&lt&lt</a>';
						} else {
							str += '<li class="disabled">';
							str += '<a href="#" >&lt&lt</a>'; 
						}
						str += '</li>';
						
						for (var i = 1; i <= getCountPage(); ++i) {
							if (i == currentPage) str += '<li class="active">'; else str += '<li>';
							str += '<a href="javascript:getProducts(' + i + ')" >' + i + '</a>';
							str += '</li>';
						}
						
				
				
						if (getCountPage() > currentPage) {
							str += '<li class="active">';
							str += '<a href="javascript:getProducts(' + (currentPage + 1) + ')" >&gt&gt</a>';
						} else {
							str += '<li class="disabled">';
							str += '<a href="#" >&gt&gt</a>'; 
						}
						str += '</li>';
					str += '</ul>';
					str += '</div>';
					
					
					
					
					str += '</center>';
					str += '</div>';
					
					
				
					jq("#contentdiv").replaceWith(str);
				} else {
					var str = '<div id="contentdiv">';
					str += '</div>';
					jq("#contentdiv").replaceWith(str);
				}
			});
		});
			
			
	}
	
	function getCountPage() {
		var productsOnPage = <%= com.sav.common.controller.Consts.COUNT_PRODUCT_ON_PAGE %>
		if (countProducts%productsOnPage == 0) 
			return (countProducts - countProducts%productsOnPage)/productsOnPage; else 
    			return (countProducts - countProducts%productsOnPage)/productsOnPage + 1;
	}
	
	
	function deleteProduct(idProduct) {
		if (confirm("really?")) {
			jq(function() {
				jq.post(
					"/catalog/deleteProduct",
					{id:  idProduct},
					function(){
						alert("deleted");
					});
			});
			
			getProducts(cPage);
		}
		
	}
	
	function showProduct(idProduct) {
		onProduct = true;
		jq(function() {
				jq.post(
					"/catalog/showProduct",
					{id:  idProduct},
					function(product){
						str = '<div id="contentdiv">';
						str += '<table width="100%">';
							str += '<tr>';
								str += '<td>IMAGE</td>';
								str += '<td>NAME</td>';
								str += '<td>DESCRIPTION</td>';
								str += '<td>COST</td>';
								str += '<td>WEIGHT</td>';
								str += '<td>QUANTITY</td>';
							str += '</tr>';
							str += '<tr>';
								str += '<td width="30%"><img width="100%" src="resources/img/' + product.idProduct + '.jpg"></td>';
								str += '<td>' + product.name + '</td>';
								str += '<td>' + product.description + '</td>';
								str += '<td>' + product.cost + '</td>';
								str += '<td>' + product.weight + '</td>';
								str += '<td>' + product.quantity + '</td>';
							str += '</tr>';
						str += '</table>';
						str += '</div>';
						
						jq("#contentdiv").replaceWith(str);
						
					});
			});
		
	}
	
	function addToCart(idProduct) {
		jq(function() {
			jq.post(
				"/catalog/addToCart",
				{id:  idProduct},
				function(){
					alert("Added");
				});
		});
		
	}
	
	
	</script>

</body>
</html>